(function () {
    $.fn.extend({
        swipePlay(width) {
            class swipe {
                constructor(el, width) {
                    this.width = width; //移动的宽度
                    this.el = el; //banner盒子
                    this.oUl = this.el.find("ul");
                    this.oOl = this.el.find("ol");
                    this.imgIndex = 0;
                    this.pointIndex = 0;
                    //自动播放
                    this.timer = setInterval(() => {
                        this.imgIndex++;
                        this.pointIndex++;
                        this.autoPlay(); //调用播放方法
                    }, 1500);
                    //初始化,图片里最后的位置加一张图 与 生成5个点
                    this.init();
                    //鼠标事件
                    this.mouseEvent();
                    //鼠标点击行为
                    this.clickHandler()
                }
                init() {
                    //1.把ul里的第一张图片,克隆一张,追到ul里最后的位置
                    let $cloneLi = this.oUl.children().eq(0).clone(true);
                    this.oUl.append($cloneLi);
                    //2.让ol有n个点 (图片多1,点少1)
                    for (let i = 0; i < this.oUl.children().length - 1; i++) {
                        $(`<li class=${i == 0 ? 'current' : ''}></li>`).appendTo(this.oOl);
                    }
                }
                //自动播放的方法
                autoPlay() {
                    if (this.imgIndex > this.oUl.children().length - 1) {
                        this.imgIndex = 1;
                        //瞬间从0开始
                        this.oUl.css({
                            left: 0
                        })
                    }
                    this.oUl.animate({
                        left: this.imgIndex * -this.width
                    })

                    //下面的点的移动
                    if (this.pointIndex == 5) {
                        this.pointIndex = 0;
                    }
                    this.oOl.children().eq(this.pointIndex).addClass("current").siblings().removeClass("current");
                }
                //鼠标的事件
                mouseEvent() {
                    let self = this;
                    this.el.on("mouseenter", () => {
                        clearInterval(this.timer);
                    }).on("mouseleave", () => {
                        self.timer = setInterval(() => {
                            self.imgIndex++;
                            self.pointIndex++;
                            self.autoPlay();
                        }, 1500);
                    })
                }
                //点击的事件
                clickHandler() {
                    let self = this;
                    this.el.on("click", "ol>li", function () {
                        let $index = $(this).index();
                        self.pointIndex = self.imgIndex = $index;
                        self.autoPlay();
                    })
                }
            }
            new swipe(this, width)
        }
    })
})()
$(function () {
    $(".banner").swipePlay(770);
    $(".leftBox").swipePlay(480);
})